<template>
  <div class="rolling-notification">
    <div class="rolling-notification__body">
      <NoticeBar
        :list="list"
        :speed="list.length * 100"
        @clearNoticeList="clearNoticeList"
      />
    </div>
  </div>
</template>
<script>
import NoticeBar from '@/components/NoticeBar/NoticeBar.vue'
import { bind } from '@/api/v2/visitor'
const fieldChineseMap = {
  visitor: '来访人员',
  company_name: '公司名',
  phone: '联系电话',
  fellow: '同行人员数量',
  docking_id: '对接人员',
  // department_id: '部门',
  arrive_time: '访问时间'
}
export default {
  name: '',
  components: {
    NoticeBar
  },
  data() {
    return {
      socket: null,
      visitInfo: {},
      list: [],
      lockReconnect: false,
      clientId: null
    }
  },
  computed: {
  },
  mounted() {
    this.establishConnection()
    // startWebSocket(this.getUrl())
  },
  destroyed() {
    this.socket.close()
  },
  methods: {

    getUrl() {
      let url = ''

      if (window.location.origin.indexOf('https://oatest.mouldc.com') > -1) {
        url = 'wss://oatest.mouldc.com/wss'
      } else if (window.location.origin.indexOf('https://oa.mouldc.com') > -1) {
        url = 'wss://oa.mouldc.com/wss'
      } else {
        url = 'wss://oatest.mouldc.com/wss'
      }
      return url
    },

    establishConnection() {
      if (typeof WebSocket === 'undefined') {
        throw new Error('浏览器不支持WebSocket')
      } else {
        const url = this.getUrl()
        this.socket = new WebSocket(url)

        this.socket.onopen = () => {
          console.log('建立连接 --------->', '建立连接')
          this.socket.send('send message')
        }

        this.socket.onmessage = e => {
          console.log('e --------->', e)
          const { data } = e
          const d = JSON.parse(data)
          // if (d.type === '@heart@') return
          console.log('d --------->', d)
          if (d.type === 'bind') {
            this.bind({ type: 'bind', client_id: d.data })
            this.clientId = d.data
          } else if (d.type === 'sendMessage') {
            this.getNoticeMessage(d)
          }
        }

        this.socket.onclose = () => {
          console.log('关闭连接 --------->', '关闭连接')
          this.reconnect()
        }

        this.socket.onerror = () => {
          console.log('连接错误 --------->', '连接错误')
        }
      }
    },

    reconnect() {
      this.establishConnection()
    },

    getNoticeMessage(d) {
      d.visit.docking_id = d?.visit?.docking_id?.username
      const { visitor, company_name, phone, fellow, docking_id, arrive_time } = d.visit
      const params = {
        visitor,
        company_name,
        phone,
        fellow,
        docking_id,
        arrive_time
      }
      const text = this.noticeTextFormat(params)
      this.list.push(text)
    },

    noticeTextFormat(params) {
      let text = ''
      Object.keys(params).forEach(v => {
        const value = `${fieldChineseMap[v]}：${params[v]}，`
        text += value
      })
      const reg = /，$/gi
      return text.replace(reg, '')
    },

    async bind(data) {
      try {
        const res = await bind(data)
        console.log('res --------->', res)
      } catch (error) {
        console.log('error --------->', error)
        throw new Error(error.message || '绑定失败')
      }
    },

    clearNoticeList() {
      console.log('123123 --------->', 123123)
      this.list = []
    }
  }
}
</script>
<style lang="scss" scoped>
.rolling-notification {
  padding: 20px;
  height: 100vh;
  background-color: #000;
  display: flex;
  align-items: center;
  &__body {
    width: 100%;
    height: 100%;
    color: #fff;
    //display: flex;
    //align-items: center;
  }
}
</style>
